<!DOCTYPE html>
<meta charset="utf-8">
<title>Scatter Plot Matrix With Geo Lib</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="GeoLib2.js"></script>

<script>


d3.csv("fla.csv",function(csv) {
    var domainByTrait = {};

    var traits = d3.keys(csv[0]).filter(function(d) {  return d;  });
    var no_of_cols=traits.length-1;

    var plot= Main_Bound_region;

    plot.svg_height=plot.g_height*no_of_cols+50;
    plot.svg_width=plot.g_width*no_of_cols+50;


    var x = d3.scale.linear()
            .range([0,plot.svg_width]);
    var y= d3.scale.linear()
            .range([plot.svg_height,0]);

    var brush = d3.svg.brush()
            .x(x)
            .y(y)
            .on("brushstart",brushstart)

            ;




    plot.SVG().call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom));
    plot.G("svg").attr("class","selecting");
    plot.G("g0").call(brush);



    var  color=Geo_Primitives.Color("10");



    var id=2;
    var x_pad= 0,y_pad=0;
    for(var col1= 0;col1<no_of_cols;col1++){
        for(var col2=no_of_cols-1;col2>-1;col2--){

            plot.G('g1').transition().attr("transform", "translate(" + x_pad + "," + y_pad + ")")
                    .duration(2000) // this is 1s
                    .delay(100).attr("class","Scatterplot");     // this is 0.1s;
                    Geo_Primitives.DrawCircle(csv, traits[col1], traits[col2], 2.5, '',0,color(traits[col1]), id);

            if (col2 == no_of_cols-1) {
                Geo_Primitives.Draw_Axis(csv,traits[col1],0,0,200,0,'v',5,id).attr("class","y axis").attr("transform", "translate(20,0)");
            }
            if (col1 == no_of_cols-1) {
                Geo_Primitives.Draw_Axis(csv,traits[col2],0,0,200,0,'h',5,id).attr("class","y axis").attr("transform", "translate(0,190)");
            }

            id++;
            x_pad+=200;
        }
        y_pad+=200;x_pad=0;
    }

    function brushstart()
    {
        brush.extent();


    }
});


function zoom() {
    d3.select("#g1").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

/*
var numericalValue = 354;
var stringValue = "This is a String";
alert(typeof numericalValue) // displays "number"
alert(typeof stringValue) // displays "string"
*/
</script>
